<template>
  <div class="findPassword">
     <header>
            <van-icon name="arrow-left" size="20" @click="back"/>
            <span>找回密码</span>
            <van-icon />
        </header>
    <div class="box">
      <div :class="active!= 1 ? 'int_num':'int_num int_num_active'">
        <input
          type="tel"
          placeholder="请输入手机号"
          maxlength="11"
          v-model="getsmscodeData.mobile"
          @focus="active=1"
          @blur="active=''"
        />
        <div class="getCAPTCHA" v-on:click="getsmsCode" v-if="!timebool">获取验证码</div>
        <div class="getCAPTCHA" v-if="timebool" style="color:#ccc;">获取验证码({{time}})</div>
      </div>
      <div :class="active!= 2 ? 'int_num':'int_num int_num_active'">
        <input
          type="text"
          placeholder="请输入验证码"
          v-model="getsmscodeData.smscode"
          @focus="active=2"
          @blur="active=''"
        />
      </div>
      <div :class="active!= 3 ? 'int_num':'int_num int_num_active'">
        <input
          type="password"
          placeholder="请输入密码"
          v-model="getsmscodeData.pass"
          @focus="active=3"
          @blur="active=''"
        />
      </div>
    </div>
    <div class="login">
      <span @click="device">确定</span>
    </div>
  </div>
</template>
<script>
import { Icon } from 'vant';
import {yanMA} from "../../request/api.js"
import {Pass} from "../../request/api.js"
export default {
    components:{
        [Icon.name]: Icon,
    },
  data() {
    return {
      getsmscodeData: {
        mobile: "",
        smscode: "",
        pass: ""
      },
      sms_type: "getPassword",
      time: 60,
      timebool: false,
      active: ""
    };
  },
  created() {
    if (this.$route.name == "SetNewPass") {
      this.title.name = "设置密码";
    }
  },
  methods: {
    getsmsCode() {
      let res =/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      if (!res.test(this.getsmscodeData.mobile)) {
       this.$toast("手机号码格式不正确");
        return;
      }
      this.timebool = true;
          this.time = 60;
          let _this = this;
          var timer = setInterval(function() {
            _this.time--;
            if (_this.time <= 0) {
              _this.timebool = false;
              clearInterval(timer);
            }
          }, 1000);
      var obj= {
          mobile: this.getsmscodeData.mobile,
          sms_type: this.getsmscodeData.sms_type
        }
        yanMA(obj).then(() => {
          this.timebool = true;
          this.time = 60;
          let _this = this;
          var timer = setInterval(function() {
            _this.time--;
            if (_this.time <= 0) {
              _this.timebool = false;
              clearInterval(timer);
            }
          }, 1000);
        });
    },
     back(){
            this.$router.go(-1);
        },
    device() {
        let res =/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      if (!res.test(this.getsmscodeData.mobile)) {
       this.$toast("手机号码格式不正确");
        return;
      }
      if (!this.getsmscodeData.pass || !this.getsmscodeData.smscode) {
        this.$toast("输入有误，请检查");
        return;
      }
      let obj={
          mobile: this.getsmscodeData.mobile,
          password: this.getsmscodeData.pass,
          sms_code: this.getsmscodeData.smscode
        }
        Pass(obj).then(() => {
          this.$toast.success({
            message: "设置成功"
          });
          setTimeout(() => {
            this.$toast.clear();
            this.$router.go(-1);
          }, 1500);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.box {
  background-color: #fff;
  margin-top: 10px;
  padding: 0 40px;
}
header{
    width:100%;
    height:42px;
    display:flex;
    text-align:center;
    padding-top: 5px;
    background:white;
    .van-icon{
        flex:1
    }
    span{
        flex:4;
        font-size:20px;
    }
}
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: rgba(190, 190, 190, 1);
}
.int_num {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  position:relative;
  .getCAPTCHA{
      position:absolute;
      right:10px;
      top:20px;
      color:#eb6100;
  }
  input {
    box-sizing: border-box;
    padding: 30px 0;
    border: 0;
    width: 540px;
    height: 100%;
    font-size: 18px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    line-height: 40px;
    float: left;
    outline: none;
  }
}
.int_num_active {
  border-color:#eb6100;
}
.login {
  width: 80%;
  height: 40px;
  margin: 30px auto ;
  // height: 374px;
  background: url("../../assets/theme-img/login-btn.png");
  background-size: 100% 100%;
  font-size: 20px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 4px;
  span {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
}
.others {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .forget {
    font-size: 18px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
  .login_CAPTCHA {
    font-size: 18px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
}

</style>
